<template>
  <div>
    <slot name="title"></slot>
    <h2 class="sub-header"><slot name="header" /></h2>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>名字</th>
            <th>工资</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in empList" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.salary }}</td>
            <td>
              <!-- 修饰符 .native注意用在组件上，当你绑定不上事件的时候记得加上 -->
              <ml-button
                @click.native="remove(index)"
                type="delete"
                size="medium"
                >删除</ml-button
              >
              <ml-button
                type="success"
                size="small"
                @click.native="dialogTableVisible = true"
                >编辑</ml-button
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 弹窗组件调用 -->
    <ml-dialog
      title="编辑人员信息"
      :isshow="dialogTableVisible"
      :hideMe="hideMe"
    >
      <template v-slot:main>
        <ul>
          <li>
            <p>姓名:<input type="text" /></p>
            <p>工资:<input type="text" /></p>
          </li>
        </ul>
      </template>
      <template v-slot:footer>
        <ml-button
          type="delete"
          size="medium"
          @click.native="dialogTableVisible = false"
          >取消</ml-button
        >
        <ml-button
          type="success"
          size="medium"
          @click.native="dialogTableVisible = false"
          >确定</ml-button
        >
      </template>
    </ml-dialog>
  </div>
</template>

<script>
import mlButton from "./mlButton.vue";
import mlDialog from "./mlDialog.vue";

export default {
  props: ["empList"],
  data() {
    return {
      dialogTableVisible: false
    };
  },

  components: {
    mlButton,
    mlDialog
  },

  methods: {
    remove(index) {
      //触发父组件的自定义事件 $emit(参数一，参数二) 参数一：事件名(必填)  参数二:选填 要传的参数
      this.$emit("del", index);
    },
    showMe() {
      this.dialogTableVisible = true;
    },
    hideMe() {
      this.dialogTableVisible = false;
    }
  }
};
</script>

<style scoped>
</style>